<template>
  <ArmyPanelLayout class="myFramePanelLayout" title="门禁记录">
    <div class="DoorRecordComp">
      <el-scrollbar v-if="tableData.length">
        <div class="DoorRecordComp--list">
          <div class="DoorRecordComp--list__item" v-for="(item, index) in tableData" :key="item.time + index">
            <div class="img">
              <!--<img :src="item.picUrl"/>-->
              <el-image
                style="width: 100%;max-height: 78px;height: 78px;"
                :src="item.picUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item.picUrl]"
                :initial-index="0"
                fit="none"
                :crossorigin="null"
                :preview-teleported="true"
              >
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="infolist">
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_姓名@2x.png"/>
                </div>
                <div class="infolist--item__value">
                  {{ item.personName }}
                </div>
              </div>
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_时间@2x.png"/>
                </div>
                <div class="infolist--item__value" style="white-space: nowrap;">
                  {{ transformDate(item.time) }}
                </div>
              </div>
              <div class="infolist--item">
                <div class="infolist--item__icon">
                  <img src="@/assets/images/armyScreen/门禁记录_地址@2x.png"/>
                </div>
                <div class="infolist--item__value two-line" style="width: 116px;">
                  {{ item.acsDeviceName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-else class="empty" style="padding-top: 5%;">
        <DataEmptyTwo></DataEmptyTwo>
      </div>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {acsRecordListService} from '@/api/armyScreenApiV2.js'
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import {ElScrollbar} from 'element-plus'
import $bus from "@/util/bus";

onMounted(() => {
  getAcsRecordList()
  $bus.on('reRequest', getAcsRecordList)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', getAcsRecordList)
})

const tableData = ref([])

/**
 * 获取门禁记录
 */
function getAcsRecordList() {
  const paramObj = {}
  acsRecordListService(paramObj).then(res => {
    tableData.value = res?.data?.list || []
  })
}

/**
 * 将后台返回的日期 格式化
 * @param dateStr {string} 日期字符串
 */
function transformDate(dateStr) {
  if (dateStr) {
    return dateStr.substring(0, 10).replaceAll("-", '/') + ' ' + dateStr.substring(11, 19)
  } else {
    return null
  }
}
</script>

<style lang="scss" scoped>
.myFramePanelLayout {
  width: 890px;
}

.DoorRecordComp {
  width: 880px;
  height: 220px;
  padding: 0 16px;

  &--list {
    display: flex;
    //justify-content: space-around;
    animation: move 20s linear infinite normal;
    padding: 14px 0;
    &:hover{
      animation-play-state:paused;
    }

    &__item {
      width: 152px;
      height: 194px;
      background: #042252;
      padding: 12px 0px 12px 8px;
      margin-right: 24px;

      .img {
        width: 136px;
        height: 78px;
        margin: 0 auto;
        margin-bottom: 10px;
        margin-left: -6px;

        ::v-deep(.el-image){
          img {
            //width: 100%;
            max-height: 78px;
            height: auto;
            object-fit: contain !important;
          }
        }

        img {
          width: 100%;
          max-height: 78px;
          height: auto;
          object-fit: contain !important;
        }
      }

      .infolist {
        height: 84px;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &--item {
          display: flex;

          &__icon {
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;

            img {
              width: 100%;
              height: auto;
            }
          }

          &__value {
            flex-grow: 1;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #D8F0FF;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
  }
}

.two-line{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.image-slot {
  margin-left: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  //background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }

}
</style>
